<template>
  <base-paenl>
    <span slot="header">租赁合同</span>
    <div slot="main" class="slot-main">
      <div class="panel-first-row clickable" @click="showDialog">
        <div
          v-for="(item, index) of firstDataList"
          :key="index"
          class="panel-first-content"
        >
          <div class="panel-first-content-top">
            <div class="panel-first-content-bg"></div>
            <div class="panel-first-content-value">{{ item.value }}</div>
          </div>
          <div class="panel-first-content-name">{{ item.name }}</div>
        </div>
      </div>
      <div v-for="(item, index) of dataList" :key="index" class="panel-item">
        <div class="panel-row">
          <div class="panel-row-bg"></div>
          <div class="panel-row-content">
            <div
              class="panel-row-content-name panel-row-content-name1"
              :title="item.name"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div v-if="item.children" class="panel-second-row2">
          <div
            v-for="(subItem, subIndex) of item.children"
            :key="subIndex"
            class="panel-second-content"
          >
            <div class="panel-second-content-name">{{ subItem.name }}</div>
            <div class="panel-second-content-value">{{ subItem.value }}</div>
          </div>
        </div>
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";
import { getTenancyContract } from "@/assets/modules/service";

@Component({
  name: "TenancyContract",
  components: { BasePaenl }
})
export default class extends Vue {
  get datePickerValue() {
    return this.$store.getters["panelData/datePickerValue"];
  }
  get areaData() {
    return this.$store.getters["panelData/areaData"];
  }
  @Watch("areaData", { deep: true })
  handleAreaData() {
    this.getTenancyContract();
  }
  firstDataList: any = [];
  dataList: any = [];
  mounted() {
    const win: any = window;
    this.firstDataList = win.dataConfig.tenancyContract.first;
    this.dataList = win.dataConfig.tenancyContract.second;
    this.getTenancyContract();
  }
  getTenancyContract() {
    const data: any = {
      code: this.areaData.areaCode,
      kssj: this.datePickerValue[0] ?? "",
      jssj: this.datePickerValue[1] ?? "",
      gridId: this.areaData.gridId,
      queryType: this.areaData.queryType,
      geoJson: this.areaData.geoJson,
      areaType: this.areaData.areaType,
      areaName: this.areaData.areaName,
      sqCodeList: this.areaData.sqCodeList
    };
    getTenancyContract(data).then((res: any) => {
      if (res?.data) {
        this.firstDataList.lsljs.value = res.data.lslj;
        this.firstDataList.xyyxhts.value = res.data.xyyxhts;
        this.dataList.bjl.children.bnd.value = res.data.bndbjl;
        this.dataList.bjl.children.bjd.value = res.data.bjdbjl;
        this.dataList.bjl.children.byd.value = res.data.bydbjl;
        this.dataList.xzl.children.bnd.value = res.data.bndxzl;
        this.dataList.xzl.children.bjd.value = res.data.bjdxzl;
        this.dataList.xzl.children.byd.value = res.data.bydxzl;
      } else {
        this.firstDataList.lsljs.value = 0;
        this.firstDataList.xyyxhts.value = 0;
        this.dataList.bjl.children.bnd.value = 0;
        this.dataList.bjl.children.bjd.value = 0;
        this.dataList.bjl.children.byd.value = 0;
        this.dataList.xzl.children.bnd.value = 0;
        this.dataList.xzl.children.bjd.value = 0;
        this.dataList.xzl.children.byd.value = 0;
      }
    });
  }
  showDialog() {
    if (
      parseInt(this.datePickerValue.substring(4, 6)) <
      new Date().getMonth() + 1
    ) {
    } else {
      let floorSiteData: any = {
        name: "租赁合同",
        children: {
          lsljs: { name: "历史累计数", value: 200, index: 0 },
          xyyxhts: { name: "现有有效合同数", value: 200, index: 1 }
        }
      };
      this.$store.commit("panel/setDialogShow", false);
      this.$nextTick(() => {
        this.$store.commit("panel/setDialogShow", true);
        this.$store.commit("panel/setDialog", "floorSite");
        this.$store.commit("panelData/setFloorSiteData", floorSiteData);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 167px;
}
.panel-first-row {
  width: 404px;
  height: 87px;
  display: flex;
  .panel-first-content {
    width: 202px;
    height: 87px;
    .panel-first-content-top {
      width: 202px;
      height: 58px;
      .panel-first-content-bg {
        width: 80px;
        height: 58px;
        background-image: url(../../assets/images/panels/lishileijishutubiaodi.png);
        background-size: 100% 100%;
      }
    }
  }
}
</style>
<style lang="scss">
.panel-first-row {
  display: flex;
  .panel-first-content {
    .panel-first-content-top {
      display: flex;
      justify-content: center;
      position: relative;
      .panel-first-content-bg {
        position: absolute;
      }
      .panel-first-content-value {
        position: absolute;
        font-family: AlibabaPuHuiTi_2_85_Bold;
        font-size: 18px;
        line-height: 17px;
        color: #fefefe;
      }
    }
    .panel-first-content-name {
      display: flex;
      justify-content: center;
      font-family: AlibabaPuHuiTi_2_55_Regular;
      font-size: 14px;
      line-height: 17px;
      color: #b4d8f7;
    }
  }
}
</style>
